const path = require('path')
const webpack = require('webpack')
const htmlWebpackPlugin = require('html-webpack-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

let config = {
  mode: 'none',
  entry: {
    main: path.join(__dirname, './src/main.js')
  },
  output: {
    filename: '[name].bundle.js',
    path: path.join(__dirname, './dist')
  },
  plugins:[//配置插件的节点
    new webpack.HotModuleReplacementPlugin(),//第3步 new一个热更新的对象
    new htmlWebpackPlugin({//创建一个在内存中生成html页面的插件
     template:path.join(__dirname,'./src/index.html'),//指定模版页面，将来会根据指定的页面去生成内存中的页面
     filename:'index.html'//指定内存中生成页面的名称
  
    }),
    new webpack.ProvidePlugin({
        $: 'jquery'
    }), 
    new VueLoaderPlugin()
   ],
   module:{//用于配置所有第三方模块加载器
    rules:[//所有第三方匹配规则
        { test:/\.css$/,use:['style-loader','css-loader'] },//使用正则方式，配置处理.css文件第三方loader规则
        { test:/\.less$/,use:['style-loader','css-loader','less-loader'] },//配置处理.less文件第三方loader规则
        { test:/\.scss$/,use:['style-loader','css-loader','sass-loader'] },//配置处理scss文件第三方loader规则

        { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader' },//处理图片路径的loader
        //limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大小等于给定的limit值，则图片不会被转为base64格式的字符串，如果小于值，则会被转base64字符串。

        { test: /\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader' },//字体文件配置项
        { test: /\.js$/, use:'babel-loader', exclude:/node_modules/},//配置babel转换高级语法
        {test:/\.vue$/,use:'vue-loader'}//处理.vue文件的loader
    ]

  },
  resolve:{
    alias:{//设置vue导入包时路径
      'vue$':'vue/dist/vue.js'
    }
  }
}

module.exports = config